<template>
	<view class="serve-box">
		<view class="content mb-20" v-for="(item,index) in infoData" :key="index">
			<view class="mt-30 mb-30">
				<u-section line-color="#5970ff" :title="item.title" :right="false"></u-section>
			</view>
			<view class="grid-box">
				<view v-for="(gridItem,gridIndex) in item.gridList" :key="gridIndex" class="grid-item"
					@click="openSkip(gridItem)">
					<u-image :src="gridItem.icon" width="50rpx" height="50rpx"></u-image>
					<view class="grid-text mt-10">{{gridItem.text}}</view>
				</view>
			</view>
			<view class="swiper-box" v-if="index===0">
				<u-swiper :list="list" :height="170"></u-swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLocalImg
	} from '@/utils/localFileUtil.js';
	export default {
		data() {
			return {
				infoData: [{
						title: '推荐服务',
						gridList: [{
								text: "投诉建议",
								icon: getLocalImg('wy_18.png')
							},
							{
								text: "报事报修",
								icon: getLocalImg('wy_04.png')
							},
							{
								text: "邻里中心",
								icon: getLocalImg('wy_13.png')
							},
							{
								text: "服务团队",
								icon: getLocalImg('wy_10.png')
							}
						],
					},
					{
						title: '商圈服务',
						gridList: [{
								text: "上门送水",
								icon: getLocalImg('wy_16.png')
							},
							{
								text: "家政服务",
								icon: getLocalImg('wy_12.png')
							},
							{
								text: "线上商超",
								icon: getLocalImg('wy_09.jpg')
							}
						],
					},
					{
						title: '社区服务',
						gridList: [{
								text: "充电桩",
								icon: getLocalImg('wy_06.png')
							},
							{
								text: "社区活动",
								icon: getLocalImg('wy_15.png')
							},
							{
								text: "门禁监控",
								icon: getLocalImg('wy_14.png')
							},
							{
								text: "智慧梯控",
								icon: getLocalImg('wy_02.png')
							}
						],
					}
				],
				list: [{
					image: getLocalImg('wy_22.png')
				}],
			}
		},
		methods: {
			openSkip(item) {
				switch (item.text) {
					case '投诉建议':
						uni.navigateTo({
							url: "/subPack/complaint"
						})
						break;
					case '报事报修':
						uni.navigateTo({
							url: "/subPack/repairs"
						})
						break;
					case '服务团队':
						uni.navigateTo({
							url: "/subPack/serviceTeam"
						})
						break;
					case '社区活动':
						uni.navigateTo({
							url: "/subPack/activityList"
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.serve-box {
		padding: 0 30rpx;

		.swiper-box {
			padding: 20rpx 0;
			margin: 20rpx 0;
		}

		.grid-box {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 40rpx;

			.grid-item {
				display: inline-block;
				text-align: center;
				background-color: $-color-white;
				padding: 30rpx 10rpx;
				border-radius: 5%;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 140rpx;
			}
		}
	}
</style>